import { Input, message, Pagination, Popconfirm, Table, Tooltip } from "antd";
import { getTypeName, getDiffcultLevelName } from "../../Api/name";
import Layout from "../Shared/Layout";
import MyButton from "../../Components/MyButton";
import { useCallback, useEffect, useState } from "react";
import { request } from "../../Api/api";
import AddQuestion from "../../Components/Operation/Exam/AddQuestion";

const Question = () => {
  const [questionList, setQuestionList] = useState([]);
  const [addingQuestionShow, setAddingQuestionShow] = useState(false);
  const [page, setPage] = useState({ current: 1, pageSize: 5 });
  const [where, setWhere] = useState({ searchWord: "" });
  const [total, setTotal] = useState(0);
  const bind = useCallback(async () => {
    const res = await request(
      "/question/pagination",
      { page: page.current, limit: page.pageSize, key: where.searchWord },
      "GET"
    );
    if (res.code >= 0) {
      setQuestionList(res.data.data);
      setTotal(res.data.total);
    }
  }, [page, where]);
  useEffect(() => {
    async function fetchData() {
      await bind();
    }
    fetchData();
  }, [bind]);
  const deleteQuestion = async (id) => {
    const res = await request(`/question/delete`, { id }, "POST");
    if (res.code >= 0) {
      message.success("删除成功");
      await bind();
    } else {
      message.error(res.message);
    }
  };
  const columns = [
    {
      title: "题目",
      dataIndex: "content",
      key: "content",
      width: 400,
      ellipsis: true,
      render: (_, { content }) => (
        <>
          <Tooltip title={content} placement="topLeft">
            <span title={""}>{content}</span>{" "}
          </Tooltip>
        </>
      ),
    },
    {
      title: "类型",
      dataIndex: "type",
      key: "type",
      render: (_, { type }) => getTypeName(type),
      width: 100,
      ellipsis: true,
    },
    {
      title: "难度",
      dataIndex: "diffcultLevel",
      key: "diffcultLevel",
      render: (_, { diffcultLevel }) => getDiffcultLevelName(diffcultLevel),
      width: 100,
      ellipsis: true,
    },
    {
      title: "操作",
      key: "operation",
      render: (_, { id }) => {
        return (
          <div>
            <MyButton
              className="extra-btn"
              type="primary"
              onClick={() =>
                (window.location.href = "/exam/question/detail?id=" + id)
              }
            >
              查看
            </MyButton>
            <Popconfirm
              title="确认删除该题目？该操作无法撤销。"
              onConfirm={() => deleteQuestion(id)}
              okText="确认"
              cancelText="取消"
            >
              <span className="extra-btn">
                <MyButton type="danger">删除</MyButton>
              </span>
            </Popconfirm>
          </div>
        );
      },
      width: 200,
      ellipsis: true,
    },
  ];
  const showAddingQuestion = () => {
    setAddingQuestionShow(true);
  };
  const handleOk = async (question) => {
    const res = await request("/question/add", question, "POST");
    if (res.code >= 0) {
      setAddingQuestionShow(false);
      message.success("添加成功");
      await bind();
    } else {
      message.error(res.message);
    }
  };
  return (
    <Layout>
      <AddQuestion
        open={addingQuestionShow}
        onOk={handleOk}
        onCancel={() => setAddingQuestionShow(false)}
      />
      <div className="table-header">
        <div className="table-header-title">题目列表</div>
        <div className="table-header-middle">
          <Input
            value={where.searchWord}
            onChange={(e) => setWhere({ searchWord: e.target.value })}
            placeholder="搜索"
          />
        </div>
        <div className="table-header-operation" onClick={showAddingQuestion}>
          <MyButton type="success">添加</MyButton>
        </div>
      </div>
      <div className="table-container">
        <Table
          bordered={true}
          sticky={true}
          pagination={false}
          rowKey={(record) => record.id}
          dataSource={questionList}
          columns={columns}
        />
        <Pagination
          total={total}
          current={page.current}
          pageSize={page.pageSize}
          onChange={(current, pageSize) => setPage({ current, pageSize })}
          showQuickJumper={true}
        />
      </div>
    </Layout>
  );
};

export default Question;
